<template>
  <div class="quick-nav fixed left-2 top-1/2 -translate-y-1/2 hidden md:block" ref="quickNavRef">
    <div class="bg-white rounded-lg shadow-lg p-2 w-36">
      <div class="space-y-1">
        <a 
          v-for="(item, index) in visibleNavItems" 
          :key="item.id"
          :href="`#${item.type}`"
          class="block px-2 py-1.5 rounded-md text-xs transition-all duration-200 nav-item"
          :class="[
            activeSection === item.type 
              ? 'bg-red-50 text-red-500 font-medium' 
              : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
          ]"
          @click.prevent="scrollToSection(item.type)"
          :ref="el => { if (el) navItemRefs[index] = el as HTMLElement }"
        >
          <div class="flex items-center">
            <el-icon class="mr-1.5 nav-icon" :class="activeSection === item.type ? 'text-red-500' : 'text-gray-400'">
              <component :is="getIcon(item.type)" />
            </el-icon>
            <span class="truncate nav-text">{{ item.title }}</span>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, nextTick } from 'vue'
import { Star, ShoppingCart, Trophy, ChatLineSquare, Lightning, Picture, Grid, Goods } from '@element-plus/icons-vue'
import type { LayoutConfig } from '@/api/modules/layout'
import { animations, animationUtils } from '@/components/animations/GSAPAnimations'

const props = defineProps<{
  layoutConfig: LayoutConfig[]
}>()

// Template refs
const quickNavRef = ref<HTMLElement | null>(null)
const navItemRefs = ref<HTMLElement[]>([])

// GSAP animation instances
let revealAnimation: gsap.core.Tween | null = null
let itemAnimations: gsap.core.Tween[] = []

// Icon mapping for different section types
const iconMap = {
  'banner': Picture,
  'flash-sale': Lightning,
  'product-showcase': Star,
  'product-grid': Grid,
  'product-carousel': Goods,
  'brands': Trophy,
  'new-arrivals': ShoppingCart,
  'topics': ChatLineSquare,
  'reviews': Star,
  'user-activity': Star
}

// Get icon component based on section type
function getIcon(type: string) {
  return iconMap[type as keyof typeof iconMap] || Star
}

// Filter visible nav items from layout config
const visibleNavItems = computed(() => {
  return props.layoutConfig?.filter(item => item.isVisible) || []
})

const activeSection = ref('')

function scrollToSection(sectionId: string) {
  const element = document.querySelector(`section[data-type="${sectionId}"]`)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
    activeSection.value = sectionId
    
    // Add a subtle animation to indicate active section
    const activeNavItem = navItemRefs.value.find(item => 
      (item as HTMLAnchorElement).href.includes(sectionId)
    )
    if (activeNavItem) {
      animations.fadeInUp(activeNavItem, 0)
    }
  }
}

function handleScroll() {
  const sections = visibleNavItems.value.map(item => 
    document.querySelector(`section[data-type="${item.type}"]`)
  )
  const scrollPosition = window.scrollY + window.innerHeight / 2

  for (let i = sections.length - 1; i >= 0; i--) {
    const section = sections[i]
    if (section && section.getBoundingClientRect().top + window.scrollY <= scrollPosition) {
      activeSection.value = visibleNavItems.value[i].type
      break
    }
  }
}

function setupAnimations() {
  if (!quickNavRef.value) return

  // Setup reveal animation for the entire navigation
  revealAnimation = animations.quickNavReveal(quickNavRef.value)

  // Setup stagger animation for navigation items
  nextTick(() => {
    if (navItemRefs.value.length > 0) {
      animations.staggerFadeIn(navItemRefs.value, { 
        delay: 1.2, 
        stagger: 0.1 
      })
    }

    // Setup individual item hover animations
    navItemRefs.value.forEach((item) => {
      const hoverTween = animations.fadeInUp(item, 0)
      hoverTween.pause()

      item.addEventListener('mouseenter', () => {
        hoverTween.restart()
      })

      itemAnimations.push(hoverTween)
    })
  })
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  // Initial check
  handleScroll()
  
  // Setup animations after component is mounted
  nextTick(() => {
    setupAnimations()
  })
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  
  // Cleanup animations
  if (revealAnimation) {
    animationUtils.cleanup(revealAnimation)
  }
  
  itemAnimations.forEach(animation => {
    animationUtils.cleanup(animation)
  })
  itemAnimations = []
})
</script>

<style scoped>
.quick-nav {
  z-index: 50;
}

.quick-nav a {
  position: relative;
}

.quick-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background-color: #f43f5e;
  transition: height 0.3s ease;
}

.quick-nav a:hover::after,
.quick-nav a[class*='bg-red-50']::after {
  height: 12px;
}

.el-icon {
  font-size: 14px;
}

/* Enhanced styles for animations */
.nav-item {
  transform-origin: left center;
}

.nav-icon {
  transition: all 0.3s ease;
}

.nav-text {
  transition: all 0.3s ease;
}

.nav-item:hover .nav-icon {
  transform: scale(1.1);
}

.nav-item:hover .nav-text {
  transform: translateX(2px);
}
</style> 
